<template>
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1 hidden md:block">
        <div class="sticky -top-60">
          <!-- 分类 -->
          <CategoryListCard></CategoryListCard>
        </div>
      </aside>
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 标签 -->
        <div v-if="tags && tags.length > 0"
          class="w-full p-5 pb-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
          <!-- 标签标题 -->
          <h2 class="flex items-center mb-5 font-bold text-gray-900 uppercase dark:text-white">
            <!-- 标签图标 -->
            <svg-icon name="tag" class="icon w-4 h-4 mr-2" />
            标签
            <span class="ml-2 text-gray-600 font-normal dark:text-gray-300">( {{ tags.length }} )</span>
          </h2>

          <!-- 标签列表 -->
          <div class="flex flex-wrap gap-3">
            <a v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)"
              class="bg-green-50 cursor-pointer inline-flex items-center px-3.5 py-1.5 text-xs font-medium text-center border rounded-[12px] hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
              {{ tag.name }}
              <span
                class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                {{ tag.articlesTotal }}
              </span>
            </a>
          </div>
        </div>
      </div>

    </div>
  </main>
  <ScrollToTopButton></ScrollToTopButton>
  <Footer></Footer>
</template>

<script setup>
import Header from "@/layouts/frontend/components/Header.vue";
import Footer from "@/layouts/frontend/components/Footer.vue";
import UserInfoCard from "@/layouts/frontend/components/UserInfoCard.vue";
import CategoryListCard from "@/layouts/frontend/components/CategoryListCard.vue";
import { getTagList } from "@/api/frontend/tag";
import { ref } from "vue";
import { useRouter } from "vue-router";
import ScrollToTopButton from "@/layouts/frontend/components/ScrollToTopButton.vue";

const router = useRouter();
// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
  console.log(id, name);
  // 跳转时通过 query 携带参数（标签 ID、标签名称）
  router.push({ path: "/tag/article/list", query: { id, name } });
};

// 所有标签
const tags = ref([]);

getTagList({}).then((res) => {
  if (res.success && res.data != null) {
    tags.value = res.data;
  }
});
</script>
